<template>
<div>
<!--   条件查询-->
  <el-form :inline="true" :model="rolefrom" class="demo-form-inline">
    <el-form-item label="角色名称">
      <el-input v-model="rolefrom.roleName" placeholder="审批人"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onlinrt">查询</el-button>
    </el-form-item>
  </el-form>
  <el-button @click="xinzeng"  type="primary">新增</el-button>
  <el-button
  @click="statuss"
  type="danger"
  >状态</el-button>
  <el-button
  @click="quanxian"
  type="warning"
  >权限</el-button>
  <el-button
  @click="delall"
  type="info"
  >批删</el-button>
<!--   列表-->
  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        prop="roleId"
        label="角色id"
        width="180">
    </el-table-column>
    <el-table-column
        prop="roleName"
        label="角色名称"
        width="180">
    </el-table-column>
    <el-table-column
        prop="roleKey"
        label="角色权限">
    </el-table-column>
    <el-table-column
     prop="status"
    label="角色状态">
      <template v-slot="pp">
        <el-switch
            v-model="pp.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="outStatus(pp.row)"
            active-value="0"
            inactive-value="1">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
     prop="dataScope"
     label="数据权限" >
    <template v-slot="ll">
      <el-tag v-if="ll.row.dataScope==1">全部数据权限</el-tag>
      <el-tag v-if="ll.row.dataScope==2">自定数据权限</el-tag>
      <el-tag v-if="ll.row.dataScope==3">本部门数据权限</el-tag>
      <el-tag v-if="ll.row.dataScope==4">本部门及以下数据权限</el-tag>
    </template>
    </el-table-column>
    <el-table-column
     prop="createTime"
    label="创建时间">
    </el-table-column>
    <el-table-column
     prop="roleSort"
    label="显示顺序">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        <el-button
            size="mini"
            type="primary"
            @click="handleQuanxian(scope.row)">数据权限</el-button>
        <el-button
        size="mini"
        type="primary"
        @click="handleShouquan(scope.row)"
        >角色授权</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--   分页-->
  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="rolefrom.pageSize"
      :current-page="rolefrom.pageNum"
      @current-change="topa"
      :total="total">
  </el-pagination>
<!--     权限信息-->
  <el-dialog title="权限信息" :visible.sync="dialogFormVisible">
    <el-form :model="addform">
      <el-form-item label="角色名称:" :label-width="formLabelWidth">
        <el-input v-model="addform.roleName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="权限字符:" :label-width="formLabelWidth">
        <el-input v-model="addform.roleKey"></el-input>
        <span class="demonstration">!控制器中定义的权限字符，如：@RequiresRoles("")</span>
      </el-form-item>
      <el-form-item label="显示顺序:" :label-width="formLabelWidth">
        <el-input v-model="addform.roleSort"></el-input>
      </el-form-item>
      <el-form-item label="状态:" :label-width="formLabelWidth">
        <el-switch
          v-model="addform.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="0"
          inactive-value="1">
      </el-switch>
      </el-form-item>
      <el-form-item label="备注:" :label-width="formLabelWidth">
        <el-input v-model="addform.remark"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="add">确 定</el-button>
    </div>
  </el-dialog>
  <!-- 分配角色数据权限对话框 -->
  <el-dialog title="分配权限" :visible.sync="openDataScope" width="500px" append-to-body>
    <el-form :model="form" label-width="80px">
      <el-form-item label="角色名称">
        <el-input v-model="form.roleName" :disabled="true" />
      </el-form-item>
      <el-form-item label="权限字符">
        <el-input v-model="form.roleKey" :disabled="true" />
      </el-form-item>
      <el-form-item label="权限范围">
        <el-select v-model="form.dataScope" >
          <el-option label="全部数据权限" value="1"></el-option>
          <el-option label="自定义数据权限" value="2"></el-option>
          <el-option label="本部门数据权限" value="3"></el-option>
          <el-option label="本部门及以下数据权限" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据权限" v-if="this.form.dataScope==2">
        <el-tree
            :data="options"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps">
        </el-tree>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitDataScope">确 定</el-button>
      <el-button @click="this.openDataScope=false">取 消</el-button>
    </div>
  </el-dialog>
  <el-row>
    <el-col :span="50">
      <div style="height: 500px;width: 500px" id="stuatus"></div>
    </el-col>
    <el-col :span="50">
      <div style="height: 500px;width: 500px" id="quanxian"></div>
    </el-col>
  </el-row>
</div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  components: {},

  data(){
     return{
       // 菜单列表
       menuOptions: [],
       defaultProps: {
         children: 'children',
         label: 'label'
       },
       // 部门列表
       options:[],
       // 部门列表
       deptOptions: [],
       deptExpand: true,
       deptNodeAll: false,
       // 分配权限from
       form:{
         menuId:[]
       },
       // 权限对话框
       openDataScope:false,
       // 添加修改
       addform:{},
       //对话框宽
       formLabelWidth:"120px",
       // 对话框
       dialogFormVisible:false,
       multipleSelection:[],
    // 列表
       tableData:[],
    // 查询条件
       rolefrom:{
         pageNum:1,
         pageSize:3
       },
       // 总条数
       total:0,
       bing:""
     }
   },
  created() {
this.getroleList()
    // 树形列表
    this.getTreeMenu()
  },
  methods:{
    /*
    批删按钮
     */
    delall(){
      let s = this.multipleSelection.map(res=>res.roleId).join();
      this.axios.post("http://localhost:8004/role/delall?roleId="+s).then(r=>{
        this.$message.success("删除成功")
        this.getroleList()
      })
    },

    /*
    获取选中的值
     */
    handleSelectionChange(val) {
      this.multipleSelection=val
    },
     /*
     角色授权
      */
    handleShouquan(row){

      sessionStorage.setItem("role",row.roleId);
      this.$router.push("auth")
    },
    /*
    状态报表
     */
    statuss(){
      this.axios.post("http://localhost:8004/role/statusTable").then(r=>{

        let dat = r.data.data;
        var chartDom = document.getElementById('stuatus');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '70%'],
              // adjust the start and end angle
              startAngle: 180,
              endAngle: 360,
              data: dat
            }
          ]
        };

        option && myChart.setOption(option);

      })

    },
    /*
     权限报表
     */
    quanxian(){
       this.axios.post("http://localhost:8004/role/dataScopeTable").then(r=>{
         let x = r.data.data.x;
         let y = r.data.data.y;
         var chartDom = document.getElementById('quanxian');
         var myChart = echarts.init(chartDom);
         var option;
         // prettier-ignore
         let dataAxis =['自定义权限','全部权限','本部门权限','部门以下权限']
// prettier-ignore
         let data = y
         let yMax = 500;
         let dataShadow = [];
         for (let i = 0; i < data.length; i++) {
           dataShadow.push(yMax);
         }
         option = {
           title: {
             text: '特性示例：渐变色 阴影 点击缩放',
             subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
           },
           xAxis: {
             data: dataAxis,
             axisLabel: {
               inside: true,
               color: '#fff'
             },
             axisTick: {
               show: false
             },
             axisLine: {
               show: false
             },
             z: 10
           },
           yAxis: {
             axisLine: {
               show: false
             },
             axisTick: {
               show: false
             },
             axisLabel: {
               color: '#999'
             }
           },
           dataZoom: [
             {
               type: 'inside'
             }
           ],
           series: [
             {
               type: 'bar',
               showBackground: true,
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   { offset: 0, color: '#83bff6' },
                   { offset: 0.5, color: '#188df0' },
                   { offset: 1, color: '#188df0' }
                 ])
               },
               emphasis: {
                 itemStyle: {
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     { offset: 0, color: '#2378f7' },
                     { offset: 0.7, color: '#2378f7' },
                     { offset: 1, color: '#83bff6' }
                   ])
                 }
               },
               data: data
             }
           ]
         };
// Enable data zoom when user click bar.
         const zoomSize = 6;
         myChart.on('click', function (params) {
           console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
           myChart.dispatchAction({
             type: 'dataZoom',
             startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
             endValue:
                 dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
           });
         });

         option && myChart.setOption(option);

       })
    },
    //获取菜单树形
    getTreeMenu(){
      this.axios.post("http://localhost:8004/role/getParentMenu").then(r=>{
        this.options=r.data.data
      })
    },

    /** 提交按钮（数据权限） */
    submitDataScope(){
       if (this.form.dataScope=='2'){
         let checkedNodes = this.$refs.tree.getCheckedNodes();
         this.form.menuId=checkedNodes
         this.axios.post("http://localhost:8004/role/jurisData",this.form).then(r=>{
           this.$message.success("修改成功")
           this.openDataScope=false
           this.getroleList()
         })
       }else {
         this.axios.post("http://localhost:8004/role/jurisData",this.form).then(r=>{
           this.$message.success("修改成功")
           this.openDataScope=false
           this.getroleList()
         })
       }
    },
    /*
    分配权限
     */
    handleQuanxian(row){
      this.form=row
      this.openDataScope=true;
    },
     /*
      新增按钮
      */
    xinzeng(){
      this.dialogFormVisible=true

    },
     /*
     编辑对话框
      */
    handleEdit(row){
      this.dialogFormVisible=true
      this.addform=row
      if (row.status==0){
        this.addform.aa=true
      }else{
        this.addform.aa=false
      }

    },
     /*
      添加修改
      */
    add(){
      this.axios.post("http://localhost:8004/role/addAndUpd",this.addform).then(r=>{
        this.$message.success(r.data.data)
        this.getroleList()
        this.dialogFormVisible=false
      })
    },
     /*
     状态失效
      */
    outStatus(u){
        this.axios.post("http://localhost:8004/role/roleUpdStatus",u).then(r=>{

          if (r.data.data== "状态已改为停用"){
             this.$message.error(r.data.data)
          }else{
            this.$message.success(r.data.data)
          }
          this.getroleList()
        })
    },
     /*
     单删删除方法
      */
    handleDelete(row){
      this.axios.delete("http://localhost:8004/role/delRoleById?roleId="+row.roleId).then(r=>{
              this.$message.success(r.data.data)
              this.onlinrt()
      })
    },
     /*
     分页改变时调用
      */
    topa(newpa){
      this.rolefrom.pageNum=newpa
      this.getroleList()
    },
     /*
     根据条件查询列表
      */
    getroleList(){
      this.axios.get("http://localhost:8004/role/listRoleObjects",{params:this.rolefrom}).then(r=>{
        this.tableData=r.data.data.list
        this.total=r.data.data.total
      })
    },
    /*
    查询按钮
     */
    onlinrt(){
      this.rolefrom.pageNum=1
      this.getroleList()
    }
  }
}
</script>

<style scoped>

</style>
